@charset "utf-8";
@import 'reset';
body{
    background-color: #F6F6F6;
    header{
        overflow: hidden;
    .tabbar{
        width: 100vw;
        height: 13.3333vw;
        background-color: white;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        .iconfont{
            position: absolute;
            font-size: 5.6vw    ;
            margin: 3.7333vw 0 4vw 3.7333vw;
        }
        img{
            position: absolute;
            width: 20vw;
            height: 8.2507vw;
            margin: 2.5413vw 37.0667vw 2.5413vw 42.9333vw;
        }
    }
    .box{
        width: 100vw;
        height: 13.3333vw;
    }
}
    img{
        width: 100vw;
        height: 54.6667vw;
    }
    .title{
        background-color: white;
        ul{
            width: 100vw;
            height: 8.8vw;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-content: center;
            li{
                display: flex;
                flex-wrap: wrap;
                align-content: center;
                .iconfont{
                    font-size: 3.7333vw;
                }
                span{
                    margin-left: .8vw;
                    color: #555555ff;
                    font-size: 3.2vw;
                    font-weight: 400;
                }
            }
        }
    }
    .classify{
        ul{
            width: 100vw;
            height: 22.6667vw;
            background-color: white;
            display: flex;
            justify-content: space-around;
            align-content: center;
            flex-wrap: wrap;
            li{
                width: 10.6667vw;
                img{
                    width: 10.6667vw;
                    height: 10.6667vw;
                }
                span{
                    display: inline-block;
                    width: 10.6667vw;
                    color: #333333ff;
                    font-size: 3.7333vw;
                    font-weight: 400;
                    text-align: center;
                }
            }
        }
    }
    .select{
        width: 100vw;
        // height: 79.0587vw;
        background-color: white;
        overflow: hidden;
        margin-top: 2.1333vw;
        .font{
            width: 94.6667vw;
            height: 4vw;
            margin: 2.6667vw auto;
            border-left: .5333vw solid #795334;
            h1{
                color: #884e22ff;
                font-size: 4vw;
                font-weight: 600;
                margin-left: 3.0667vw;
            } 
        }
        .select-img{
            display: flex;
            justify-content: space-evenly;
            img{
                width: 29.6vw;
                height: 33.4587vw;
                border-radius: .8vw;
            }
        }
        ul{
            margin: 2.6667vw 2.6667vw 5.3333vw;
            display: flex;
            justify-content: space-between;
            li{
                width: 22.6667vw;
                height: 28.2667vw;
                border-radius: 1.3333vw;
                background: #f3ebe3ff;
                h1{
                    margin-top: 2.9333vw;
                    margin-bottom: 1.8667vw;
                    color: #884e22ff;
                    font-size: 3.7333vw;
                    font-weight: 600;
                    text-align: center;
                }
                img{
                    width: 18.1333vw;
                    height: 18.1333vw;
                    margin-left: 2.2667vw;
                }
            }
        }
    }
    .flower{
        width: 100vw;
        background-color: white;
        overflow: hidden;
        .flower-title{
            width: 21.3333vw;
            height: 8vw;
            margin: 7.4667vw auto 1.3333vw;
            position: relative;
            h2{
                color: #555555ff;
                font-size: 4vw;
                font-weight: 600;
                text-align: center;
            }
            hr{
                position: absolute;
                bottom: 0;
                width: 21.3333vw;
                height: 1.0667vw;
                border-radius: 1.0667vw;
                background: #884e22ff;
            }
        }
        ul{
            width: 100vw;
            display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
            align-content: space-evenly;
            li{
                margin-top: 4vw;
                width: 44vw;
                height: 55.3333vw;
                position: relative;
                img{
                    width: 44vw;
                    height: 44vw;
                }
                p{
                    margin-top: 1.0667vw;
                    margin-bottom: 1.3333vw;
                    color: #666666ff;
                    font-size: 3.7333vw;
                    font-weight: 400;
                }
                span{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    color: #ff4433ff;
                    font-size: 3.7333vw;
                    font-weight: 600;
                    text-align: left;
                }
                span:last-child{
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    color: #999999ff;
                    font-size: 3.2vw;
                    font-weight: 400;
                    text-align: right;
                }
            }
        }
        .more{
            width: 18.6667vw;
            height: 7.2vw;
            margin: 5.7333vw auto 0;
            border: .2667vw solid #999999ff;
            p{ 
                color: #999999ff;
                font-size: 3.2vw;
                font-weight: 400;
                text-align: center;
                line-height: 7.2vw;

            }
        }
        .false{
            width: 100vw;
            height: 4vw;
        }
    }
    .flower:nth-child(5){
        margin-top: 2.4vw;
    }
    .copyright{
        margin-top: 2.6667vw;
        width: 100vw;
        height: 21.3333vw;
        background-color: white;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        p{
            color: #999999ff;
            font-size: 3.2vw;
            font-weight: 400;
            line-height: 5.3333vw;
            text-align: center;
        }
    }
    .tabbar-false{
        width: 100vw;
        height: 13.6vw;
    }
    .tabbar-foot{
        width: 100vw;
        height: 13.6vw;
        background-color: #F6F6F6;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        position: fixed;
        bottom: 0;
        z-index: 1;
        left: 0;
        ul{
            margin-top: .5333vw;
            position: absolute;
            width: 62.4vw;
            display: flex;
            justify-content: space-between;
            a{
                text-decoration: none;
                cursor: pointer;
            li{
                .iconfont{
                    color: black;
                    font-size: 8vw;
                }
                p{
                    text-align: center;
                    color: #000000ff;
                    font-size: 3.2vw;
                    font-weight: 400;
                }
            }
        }
        a:hover{
            .iconfont{
                color: red;
            }
            p{
                color: red;
            }
        }
        a:first-child{
            li{
                .iconfont{
                    color: red;
                }
                p{
                    color: red;
                }
            }
        }    
        }
    }
}